html{
  height:100%;
}

body{
  height:100%;
}

#app{
  width:100%;
  height:100%;

  min-width: 900px;
  min-height:500px;

  overflow: auto;/*超出范围自动产生滚动条*/

  display: flex;/* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
  flex-direction: row;/*内部元素按行排列*/

}

.nav {
  height: 100%;

  overflow: hidden; /*超出范围隐藏*/
  transition: width 0.5s;

  box-shadow: rgba(0.1, 0.1, 0.1, 0.1) 1px 1px 1px 1px;

  display: flex;
  flex-direction: column;
}

.main{
  height:100%;
  flex:auto;/*本元素做为flex容器中的元素，以自动扩展占位*/

  display: flex;
  flex-direction: column;

}

.title{
  width:100%;
  height:50px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
  display: flex;
  flex-direction: row;
  position: relative;/*这样设置，将做为子元素的定位基准*/
}

.curruser{
  position:absolute;/*相对于父元素定位*/
  right:20px;
  bottom: 5px;

  display:flex;
  flex-direction: row;/*主轴为水平方向*/
  align-items: center;/*交叉轴居中对齐*/

}

.main-menu:hover{/*鼠标悬浮时的样式*/
  color:white;
  background-color: slateblue;
}